<template>
  <div class="city-container">
    <div class="city-input-class" @click="showCityListDom()">
      <div style="font-size: 12px;">{{ currentCityName }}</div>
      <div :class="{up:!shape,down:shape}"></div>
    </div>
    <div v-show="!shape" class="cityTable">
      <div style="margin: 5px 5px 5px 10px;font-size: 15px;font-weight: bolder">
        城市列表
      </div>
      <input id="searchInput" style="outline:none;margin-left:10px;width: 100px;" placeholder="请输入城市名称"/>
      <button @click="search">搜索</button>
      <div style="margin: 5px;border-bottom: 1px solid #ccc"></div>


      <div class="municipalities">
        <span style="font-size: 14px">直辖市：</span>
        <div v-for="(item,index) in cityData.municipalities" :key="index">
          <a class="cityName" @click="getXy(item)">{{ item.n }}</a>
        </div>
      </div>


      <div class="provinces">
        <div>
          <div v-for="(item,idx) in cityData.provinces" :key="idx" style="display: flex">
            <a class="provinceName" @click="getXy(item)">{{ item.n + '：' }}</a>
            <div style="margin-bottom: 10px">
              <a v-for="(city,i2) in item.cities" :key="i2" class="cityName" @click="getXy(city)">{{ city.n }}</a>
            </div>
          </div>
        </div>
      </div>


      <div class="other">
        <span style="font-size: 14px">其它：</span>
        <div v-for="item in cityData.other">
          <a class="cityName" @click="getXy(item)">{{ item.n }}</a>
        </div>
      </div>
    </div>
    <!--  作用：使计算属性 生效  -->
    <div v-show="false">{{ zz }}</div>
  </div>
</template>

<script>
import cityDataXy from "./MapCityDataNoXpath";
import citys from './citys';

export default {
  name: 'ctCitySelect',
  components: {cityDataXy, citys},
  props: {
    defaultCity: {
      type: Object,
      default: function () {
        return {
          name: '哈尔滨',
          coordinate: {x: 126.657717, y: 45.773225}
        }
      }
    }
  },
  data: () => ({
    cityList: citys,
    shape: true,
    cityData: cityDataXy,
    // 当前 城市
    currentCityName: '哈尔滨',
  }),
  mounted() {
    this.reSet()
  },
  methods: {
    search() {
      // 输入的值
      let inputValue = document.getElementById('searchInput').value
      let arr = []
      this.cityList.forEach(function (value) {
        if (value.includes(inputValue)) {
          arr.push(value)
        }
      })
      if (arr.length === 0) {
        console.error('请输入正确的城市名称')
      } else {
        //   "漳州        117.676205,24.517065|12"
        let cityName = arr[0].split('_')[0]; // 标准城市名称
        let ps = arr[0].split('_')[1]; //包含 坐标点的 字符串
        let indexOf = ps.indexOf('|');
        let s = ps.substring(0, indexOf);
        let point = s.split(',');
        let x = point[0]
        let y = point[1]
        console.log('截取的点', x, y)
        const {map} = this.$parent
        map.setCenter([x, y])
        this.currentCityName = cityName
        this.shape = true
      }
    },
    showCityListDom() {
      this.shape = !this.shape
    },
    getXy(geoInfo) {
      let geo = geoInfo.g
      let name = geoInfo.n
      let info = {
        zoom: geo.split('|')[1],
        coordinate: {
          x: geo.split('|')[0].split(',')[0],
          y: geo.split('|')[0].split(',')[1]
        }
      }
      const {map} = this.$parent;
      map.setCenter([parseFloat(info.coordinate.x), parseFloat(info.coordinate.y)])
      this.currentCityName = name
      this.shape = true
      this.$emit('coordinate-event', info)
    },
    /**
     * 设置 地图 中心
     *
     */
    reSet() {
      this.$nextTick(function () {
        if (this.defaultCity.name && this.defaultCity.coordinate) {
          const {map} = this.$parent;
          map.setCenter([this.defaultCity.coordinate.x, this.defaultCity.coordinate.y])
          this.currentCityName = this.defaultCity.name
        }
      })
    },
  },
  computed: {
    zz: function () {
      this.reSet()
      return this.defaultCity;
    }
  }
}
</script>

<style scoped>
.city-input-class {
  position: relative;
  display: inline-block;
  text-align: left;
  margin: auto;
  width: 50px;
  height: 24px;
  line-height: 24px;
  border: 1px solid #c4c7cc;
  background-color: #fff;
  padding: 0 10px 0 10px;
  color: #000;
  border-radius: 3px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.city-input-class:hover {
  color: #409EFF;
  border-color: #409EFF;
}

/*下三角样式: 空元素，上下设置左右边框以及上边框，令左右边框透明即可得到*/
.down {
  border-left: 5px solid #000000;
  border-left-color: transparent;
  border-right: 5px solid #000000;
  border-right-color: transparent;
  border-top: 8px solid #c4c7cc;
  right: 4px;
  top: 10px;
  position: absolute;
}

.up {
  position: absolute;
  border-left: 5px solid #000000;
  border-left-color: transparent;
  border-right: 5px solid #000000;
  border-right-color: transparent;
  border-bottom: 8px solid #c4c7cc;
  right: 4px;
  top: 10px
}

.cityTable {
  width: 400px;
  height: 430px;
  border: 1px solid #cdcdcd;
  z-index: 2;
  background: #fafafa;
  overflow: hidden;
  box-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
  border-radius: inherit;
}


.municipalities {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 10px;
}

.provinces {
  display: flex;
  margin: 10px;
  height: 280px;
  overflow-y: auto;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  padding-top: 10px;
}

.other {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 10px;
}

a {
  color: #3d6dcc;
  white-space: nowrap;
  margin-right: 9px;
  line-height: 18px;
  float: left;
  cursor: pointer;
}

.provinceName {
  font-size: 14px;
}

.cityName {
  font-size: 12px;
}

a:hover {
  font-weight: bold
}

/*滚动条样式*/
.provinces::-webkit-scrollbar { /*滚动条整体样式*/
  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 6px;
}

.provinces::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
  border-radius: 5px;
  /*-webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2);*/
  background: rgba(0, 0, 0, 0.2);
}

.provinces::-webkit-scrollbar-track { /*滚动条里面轨道*/
  /*-webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2);*/
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

.city-container {
  height: 24px;
  width: 70px;
  margin-right: 5px;
  -webkit-user-select: none;
}
</style>

